<template>
  <div>
    <el-button @click="change">点击我</el-button>
    <test :objectData="objectData" :name="name"></test>

    <el-select v-model="value1" multiple placeholder="请选择" @change="changeList">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="action" label="操作" align="center">
        <template slot-scope="scope">
           <el-button type="text" size="small" @click="editDataRow">编辑</el-button>
          <el-button type="text" size="small" @click="clcikDeleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="addRow">点击我加一行数据</el-button>
      引用日期组件
      <DateSelect   />
  </div>
</template>

<script>
import DateSelect from '../../../commonComponents/DateSelect.vue'
import test from '../components/test.vue'
export default {
  components: {
    test,DateSelect
  },
  data() {
    return {
      content:'今天天气真好,今天天气真好',
      text:"2023",
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value1: [],
      name: '我不是默认值',
      objectData: {}
    }
  },
  computed: {
    // tableDataOne() {
    //   console.log('1111')
    //   let newData = [...this.tableData]
    //   return  newData
    // }
  },
  methods: {
     // 父页面添加 日期改变的方法
    dateChange(obj) {
      console.log(obj.month + '-' + obj.day);
    },
    //点击加一行
    addRow() {
      const newRow = {
        date: '2016-05-03',
        name: '212',
        address: '上海市普陀区金沙江路 1516 弄'
      }
      this.tableData.push(newRow)
    },

    //指定删除当前行数据
    clcikDeleteRow(row) {
      let index=this.tableData.indexOf(row)   //记录当前索引的位置
      this.tableData.splice(index, 1)
       console.log(this.tableData)
    },

    //指定编辑当前行数据
    editDataRow(row) {

    },
    changeList(data) {
      console.log(data)
    },




    change() {
      // this.objectData = {
      //   name: '权佳明',
      //   age:13
      // }

      //这种方式添加的属性不会触发响应式
      //  this.objectData.name="权佳明"
      //  this.objectData.age = 19

      //触发响应式
      this.$set(this.objectData, "name", "朱浩然")
      this.$set(this.objectData, "age", 12)
      this.name = "秘密"
    }
  }
}
</script>

<style></style>
